<style>
    .layui-form-item {
        margin-bottom: 30px;
    }

    div.thumbs > .img-box {
        float: left;
        margin-right: 30px;
        width: 120px;
        height: 120px;
        border: 1px solid #E6E6E6;
        position: relative;
    }

    div.thumbs > .img-box > img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 40%;
        left: 50%;
        margin-top: -25px; /* 高度的一半 */
        margin-left: -25px; /* 宽度的一半 */
    }

    div.thumbs > .img-box > img.okImg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        margin: 0;
    }

    div.thumbs > .img-box > p.first-tips {
        text-align: center;
        color: #ffffff;
        font-size: 10px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 25px;
        line-height: 25px;
        background: rgba(0, 0, 0, .5);
        cursor: default;
    }

    div.thumbs > .img-box > p.first-tips img.ok {
        margin-top: -2px;
    }

    table.goods-add-table{
        width: 100%;
        border:solid #f1f3f4;
        border-width:1px 0px 0px 1px;
        font-size:12px;
    }
    table.goods-add-table .layui-input{
        height:34px;
    }

    table.goods-add-table tr.title{
        background: #F9FBFC;
        font-size: 15px;
    }

    table.goods-add-table td{
        padding:15px 25px 15px 10px;
    }
    table.goods-add-table td.ipt{
        padding:5px 25px 5px 10px;
    }

    table.goods-add-table tr.title td{
        padding:10px 25px 10px 10px;
    }
    table.goods-add-table td.txt{
        width:240px;
        text-align: right;
    }
</style>
<!--<div class="layui-tab layui-tab-brief pos" lay-filter="docDemoTabBrief">-->
    <!--<ul class="layui-tab-title">-->
        <!--<li class="layui-this">商品信息</li>-->
        <!--<li>商品详情</li>-->
    <!--</ul>-->
    <!--<div class="layui-tab-content" style="margin-top: 50px;">-->
        <!--<div class="layui-tab-item layui-show">-->
            <!--<form class="layui-form" action="" style="width: 1024px;margin:0 auto">-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">商品SN</label>-->
                    <!--<div class="layui-input-block">-->
                        <!--<input type="text" name="goodsSn" lay-verify="title" autocomplete="off"-->
                               <!--placeholder="如果不填写系统会默认生成唯一货号" class="layui-input" style="width: 488px;">-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">商品名称</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="tel" name="goodsName" lay-verify="required|phone" autocomplete="off"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">名称样式</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="style" lay-verify="email" autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">商品类型</label>-->
                        <!--<div class="layui-input-inline">-->
                            <!--<input type="text" name="goodsType" lay-verify="email" autocomplete="off"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

                <!--<div class="layui-form-item">-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">商品分类</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="cateId" lay-verify="required" placeholder="请输入" autocomplete="off"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">所属门店</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="storeId" lay-verify="required" placeholder="请输入" autocomplete="off"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

                <!--<div class="layui-form-item">-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">浏览次数</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="hits" lay-verify="required" placeholder="请输入" autocomplete="off"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">商品排序</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="sortOrder" lay-verify="required" placeholder="请输入"-->
                                   <!--autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

                <!--<div class="layui-form-item">-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">市场价格</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="shopPrice" lay-verify="required" placeholder="请输入"-->
                                   <!--autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">商品单位</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="goodsWeight" lay-verify="required" placeholder="请输入"-->
                                   <!--autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">促销价格</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="promotePrice" lay-verify="required" placeholder="请输入"-->
                                   <!--autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">开始时间</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="promoteStartDate" id="promoteStartDate" autocomplete="off"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">结束时间</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="promoteEndDate" id="promoteEndDate" autocomplete="off"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->

                <!--<div class="layui-form-item">-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">库存数</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="goodsNum" lay-verify="required" placeholder="请输入"-->
                                   <!--autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="layui-inline">-->
                        <!--<label class="layui-form-label">商品预警数</label>-->
                        <!--<div class="layui-input-block">-->
                            <!--<input type="text" name="warnNum" lay-verify="required" placeholder="请输入" autocomplete="off"-->
                                   <!--class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="layui-form-item">-->
                    <!--<label class="layui-form-label">图片集</label>-->
                    <!--<div class="layui-input-block thumbs">-->
                        <!--<div class="img-box" index="0">-->
                            <!--<img src="static/images/tx.jpg" class="okImg"/>-->
                            <!--<p class="first-tips">-->
                                <!--<img class="ok" src="static/icon/ok.svg"/> 封面图-->
                            <!--</p>-->
                        <!--</div>-->
                        <!--<div class="img-box" index="1">-->
                            <!--<img src="static/images/add_img.svg"/>-->
                            <!--<p class="first-tips">-->
                                <!--图二-->
                            <!--</p>-->
                        <!--</div>-->
                        <!--<div class="img-box" index="2">-->
                            <!--<img src="static/images/add_img.svg"/>-->
                            <!--<p class="first-tips">-->
                                <!--图三-->
                            <!--</p>-->
                        <!--</div>-->
                        <!--<div class="img-box" index="3">-->
                            <!--<img src="static/images/add_img.svg"/>-->
                            <!--<p class="first-tips">-->
                                <!--图四-->
                            <!--</p>-->
                        <!--</div>-->
                        <!--<div class="img-box" index="4">-->
                            <!--<img src="static/images/add_img.svg"/>-->
                            <!--<p class="first-tips">-->
                                <!--图五-->
                            <!--</p>-->
                        <!--</div>-->
                        <!--<div class="img-box" index="5">-->
                            <!--<img src="static/images/add_img.svg"/>-->
                            <!--<p class="first-tips">-->
                                <!--图六-->
                            <!--</p>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</form>-->

        <!--</div>-->
        <!--<div class="layui-tab-item">-->
            <!--<div style="width: 1024px;margin: 0 auto;">-->
                <!--<p style="padding: 10px 0">商品描述</p>-->
                <!--<textarea name="description" placeholder="请输入商品描述内容" class="layui-textarea"-->
                          <!--style="width:1024px;min-height:30px;resize:none;"></textarea>-->
                <!--<p style="padding: 10px 0">商品展示详情</p>-->
                <!--<div id="editor" type="text/plain" style="width:1024px;height:500px;"></div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div style="position: absolute;top:0;right:0;">-->
        <!--<button class="layui-btn layui-btn-sm">添加商品</button>-->
    <!--</div>-->
<!--</div>-->
<div>
    <table class="goods-add-table" border="1">
        <tr class="title">
            <td colspan="2">商品信息</td>
        </tr>
        <tr>
            <td class="txt">商品分类：</td>
            <td class="ipt"><input type="text" name="goodsSn" lay-verify="title" autocomplete="off"
                       placeholder="如果不填写系统会默认生成唯一货号" class="layui-input w250"></td>
        </tr>
        <tr>
            <td class="txt">商品名称：</td>
            <td class="ipt"><input type="text" name="goodsSn" lay-verify="title" autocomplete="off"
                                   placeholder="请输入商品名称" class="layui-input w250"></td>
        </tr>
        <tr>
            <td class="txt">商品货号：</td>
            <td class="ipt"><input type="text" name="goodsSn" lay-verify="title" autocomplete="off"
                                   placeholder="如果不填写系统会默认生成唯一货号" class="layui-input w250"></td>
        </tr>
        <tr>
            <td class="txt">商品促销语：</td>
            <td class="ipt"><input type="text" name="goodsSn" lay-verify="title" autocomplete="off"
                                   placeholder="请输入促销语" class="layui-input" style="width:400px;"></td>
        </tr>
        <tr>
            <td class="txt">市场价：</td>
            <td class="ipt"><input type="text" name="goodsSn" lay-verify="title" autocomplete="off"
                                   placeholder="0" class="layui-input w250"></td>
        </tr>
        <tr>
            <td class="txt">销售价：</td>
            <td class="ipt"><input type="text" name="goodsSn" lay-verify="title" autocomplete="off"
                                   placeholder="0" class="layui-input w250"></td>
        </tr>
        <tr>
            <td class="txt">成本价：</td>
            <td class="ipt"><input type="text" name="goodsSn" lay-verify="title" autocomplete="off"
                                   placeholder="0" class="layui-input w250"></td>
        </tr>
        <tr>
            <td class="txt">总库存：</td>
            <td class="ipt"><input type="text" name="goodsSn" value="0" class="layui-input" style="width:80px;"></td>
        </tr>
        <tr>
            <td class="txt">预警数：</td>
            <td class="ipt"><input type="text" name="goodsSn" value="0" class="layui-input" style="width:80px;"></td>
        </tr>
        <tr class="title">
            <td colspan="2">商品图片</td>
        </tr>
        <tr>
            <td class="txt">商品图片：</td>
            <td class="ipt">
                <div class="layui-input-block thumbs" style="margin-left: 0px;">
                    <div class="img-box" index="0">
                        <img src="static/images/tx.jpg" class="okImg"/>
                        <p class="first-tips">
                            <img class="ok" src="static/icon/ok.svg"/> 封面图
                        </p>
                    </div>
                    <div class="img-box" index="1">
                        <img src="static/images/add_img.svg"/>
                        <p class="first-tips">
                            图二
                        </p>
                    </div>
                    <div class="img-box" index="2">
                        <img src="static/images/add_img.svg"/>
                        <p class="first-tips">
                            图三
                        </p>
                    </div>
                    <div class="img-box" index="3">
                        <img src="static/images/add_img.svg"/>
                        <p class="first-tips">
                            图四
                        </p>
                    </div>
                    <div class="img-box" index="4">
                        <img src="static/images/add_img.svg"/>
                        <p class="first-tips">
                            图五
                        </p>
                    </div>
                    <div class="img-box" index="5">
                        <img src="static/images/add_img.svg"/>
                        <p class="first-tips">
                            图六
                        </p>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="title">
            <td colspan="2">商品详情</td>
        </tr>
        <tr>
            <td class="txt" valign="top">商品描述：</td>
            <td class="ipt"><div id="goods-editor" type="text/plain" style="width:100%;height:500px;"></div></td>
        </tr>
    </table>
    <div style="margin-top:30px;text-align: center;"><button class="layui-btn"><i class="layui-icon">&#xe618;</i>完成, 发布商品</button></div>
</div>
<script type="text/javascript" charset="utf-8" src="./static/plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="./static/plugins/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="./static/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    $(function () {
        // var mue = UE.getEditor('mEditor', {
        //     toolbars: [
        //         ['undo', //撤销
        //             'redo', //重做
        //             'bold', //加粗
        //             'indent', //首行缩进
        //             'italic', //斜体
        //             'underline', //下划线
        //             'strikethrough', //删除线
        //             'pasteplain', //纯文本粘贴模式
        //             'inserttitle', //插入标题
        //
        //             'fontfamily', //字体
        //             'fontsize', //字号
        //             'paragraph', //段落格式
        //             'link', //超链接
        //             'emotion', //表情
        //             'spechars', //特殊字符
        //             'justifyleft', //居左对齐
        //             'justifyright', //居右对齐
        //             'justifycenter', //居中对齐
        //             'justifyjustify', //两端对齐
        //             'forecolor', //字体颜色
        //             'backcolor', //背景色
        //             'insertorderedlist', //有序列表
        //             'insertunorderedlist', //无序列表
        //             'simpleupload', //上传图片
        //             'lineheight', //行间距
        //             'edittip ', //编辑提示
        //         ]
        //     ]
        // });
        var wue = UE.getEditor('goods-editor');

        layui.laydate.render({
            elem: '#promoteStartDate',
            type: 'datetime'
        });

        layui.laydate.render({
            elem: '#promoteEndDate',
            type: 'datetime'
        });


        //上传图片产品图片
        var goodsImgUpload = layui.upload.render({
            elem: "div.img-box>img" //绑定元素
            , url: ctx + '/upload/oss' //上传接口
            , data: {dir: "IdleEgg/goods/img"}
            , exts: "png|jpg"
            , field: "files"
            , size: 1000
            , done: function (res) {
                //上传完毕回调
                if (res.code == 0) {
                    var i = this.item.parent().attr("index");
                    $("div.img-box").eq(i).find("img").attr("src", res.data[0]);
                    $("div.img-box").eq(i).find("img").attr("class", "okImg");
                    app.tips("商品图片上传成功!");
                } else {
                    app.tips(res.message, 0);
                }
            }
        });

        $(document).off("click").on("click", "div.img-box p.first-tips", function () {
            var i = $(this).parent().attr("index");
            $.each($(this).parent().siblings(), function (i, obj) {
                var text = "";
                if(i == 0){
                    text = "图一";
                }else if(i == 1){
                    text = "图二";
                }else if(i == 2){
                    text = "图三";
                }else if(i == 3){
                    text = "图四";
                }else if(i == 4){
                    text = "图五";
                }else if(i == 5){
                    text = "图六";
                }
                $(obj).find("p.first-tips").html(text);
            });
            $(this).html('<img class="ok" src="static/icon/ok.svg"/> 封面图');
        });
    });
</script>